<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>el与data的两种写法</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备一个div元素，用于挂载组件 -->
    <div id="root">
      <h1>你好,{{name}}</h1>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    // 1. el 的两种写法 两种写法皆可
    /* const v = new Vue({
      // el: "#root", // 第一种写法
      data: {
        name: "小明",
      },
    });
    console.log(v);

    // 将组件挂载到页面上
    v.$mount("#root"); // 第二种写法 */

    // 2. data的两种写法 使用组件时必须使用函数式写法
    new Vue({
      el: "#root",
      // 第一种写法：对象式
      /* data: {
        name: "小明",
      }, */
      // 第二种写法：函数式
      data() {
        // 注意：此处的函数必须为普通函数，不能为箭头函数
        console.log(this); // 此处的this为Vue实例对象
        return {
          name: "小明",
        };
      },
    });
  </script>
</html>
